<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM演示</title>
</head>
<body>
<div style="font-size: 30px; text-align: center;" id="tb1">课程表</div>
<table width="800px" border="1" cellspacing="0"
       align="center">
  <tr>
    <th>学号</th>
    <th>姓名</th>
    <th>分数</th>
    <th>评语</th>
  </tr>
  <tr align="center" class="data">
    <td>001</td>
    <td>张三</td>
    <td>90</td>
    <td>很优秀</td>
  </tr>
  <tr align="center" class="data">
    <td>002</td>
    <td>李四</td>
    <td>92</td>
    <td>优秀</td>
  </tr>
  <tr align="center" class="data">
    <td>003</td>
    <td>王五</td>
    <td>83</td>
    <td>很努力,不错</td>
  </tr>
  <tr align="center" class="data">
    <td>004</td>
    <td>赵六</td>
    <td>98</td>
    <td>666</td>
  </tr>
</table>
<br>
<div style="text-align: center;">
  <input id="b1" type="button" value="改变标题内容"
         onclick="fn1()">
  <input id="b2" type="button" value="改变标题颜色"
         onclick="fn2()">
  <input id="b3" type="button" value="删除最后一个"
         onclick="fn3()">
</div>
</body>
<script>
  function fn1(){
    document.getElementById('tb1').innerHTML="学员成绩表";
  }
  function fn2(){
    document.getElementById('tb1').style="font-size: 30px;text-align: center; color: red;"
  }
  function fn3(){
    var trs = document.getElementsByClassName('data');
    trs[trs.length-1].remove();
  }
</script>
</html>